<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小学必背诗词随机抽查系统</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background: url('https://img.freepik.com/free-vector/green-watercolor-texture_1048-7668.jpg') no-repeat center center fixed;
            background-size: cover;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            color: #333;
        }
        
        .container {
            background-color: rgba(255, 255, 255, 0.85);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            width: 90%;
            text-align: center;
            margin-bottom: 20px;
        }
        
        h1 {
            color: #2e7d32;
            margin-bottom: 30px;
        }
        
        .poem-display {
            font-size: 24px;
            min-height: 80px;
            margin: 30px 0;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed #4caf50;
        }
        
        .buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        button {
            background-color: #4caf50;
            color: white;
            border: none;
            padding: 12px 25px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            min-width: 150px;
        }
        
        button:hover {
            background-color: #388e3c;
            transform: translateY(-2px);
        }
        
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
            transform: none;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            max-width: 80%;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
            width: 600px;
        }
        
        .modal-close {
            position: absolute;
            bottom: 20px;
            right: 20px;
            padding: 8px 16px;
            background-color: #f44336;
        }
        
        .poem-content {
            text-align: left;
            white-space: pre-line;
            line-height: 1.8;
            font-size: 18px;
        }
        
        .footer {
            margin-top: auto;
            color: white;
            text-align: center;
            padding: 15px;
            font-size: 14px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        @media (max-width: 600px) {
            .container {
                padding: 20px 15px;
            }
            
            .poem-display {
                font-size: 18px;
                padding: 15px;
                min-height: 60px;
            }
            
            button {
                padding: 10px 15px;
                min-width: 120px;
                font-size: 14px;
            }
            
            .modal-content {
                max-width: 90%;
                padding: 20px;
            }
            
            .poem-content {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>小学必背诗词随机抽查系统</h1>
        <div class="poem-display" id="poemDisplay">点击下方按钮开始抽查</div>
        <div class="buttons">
            <button id="startBtn">开始随机抽查</button>
            <button id="stopBtn" disabled>暂停</button>
            <button id="showAnswerBtn" disabled>查看诗词答案</button>
        </div>
    </div>
    
    <div class="modal" id="answerModal">
        <div class="modal-content">
            <h2 id="modalTitle"></h2>
            <div class="poem-content" id="poemContent"></div>
            <button class="modal-close" id="closeModal">关闭弹窗</button>
        </div>
    </div>
    
    <div class="footer">
        由 老亓 用 DeepSeek 1分钟生成，你也可以去尝试制作
    </div>
    
    <script>
        // 小学必背诗词库
        const poems = [
            {
                title: "静夜思",
                content: "床前明月光，疑是地上霜。\n举头望明月，低头思故乡。"
            },
            {
                title: "春晓",
                content: "春眠不觉晓，处处闻啼鸟。\n夜来风雨声，花落知多少。"
            },
            {
                title: "悯农(其一)",
                content: "锄禾日当午，汗滴禾下土。\n谁知盘中餐，粒粒皆辛苦。"
            },
            {
                title: "悯农(其二)",
                content: "春种一粒粟，秋收万颗子。\n四海无闲田，农夫犹饿死。"
            },
            {
                title: "登鹳雀楼",
                content: "白日依山尽，黄河入海流。\n欲穷千里目，更上一层楼。"
            },
            {
                title: "望庐山瀑布",
                content: "日照香炉生紫烟，遥看瀑布挂前川。\n飞流直下三千尺，疑是银河落九天。"
            },
            {
                title: "赠汪伦",
                content: "李白乘舟将欲行，忽闻岸上踏歌声。\n桃花潭水深千尺，不及汪伦送我情。"
            },
            {
                title: "黄鹤楼送孟浩然之广陵",
                content: "故人西辞黄鹤楼，烟花三月下扬州。\n孤帆远影碧空尽，唯见长江天际流。"
            },
            {
                title: "早发白帝城",
                content: "朝辞白帝彩云间，千里江陵一日还。\n两岸猿声啼不住，轻舟已过万重山。"
            },
            {
                title: "望天门山",
                content: "天门中断楚江开，碧水东流至此回。\n两岸青山相对出，孤帆一片日边来。"
            },
            {
                title: "别董大",
                content: "千里黄云白日曛，北风吹雁雪纷纷。\n莫愁前路无知己，天下谁人不识君。"
            },
            {
                title: "绝句(两个黄鹂鸣翠柳)",
                content: "两个黄鹂鸣翠柳，一行白鹭上青天。\n窗含西岭千秋雪，门泊东吴万里船。"
            },
            {
                title: "春夜喜雨",
                content: "好雨知时节，当春乃发生。\n随风潜入夜，润物细无声。\n野径云俱黑，江船火独明。\n晓看红湿处，花重锦官城。"
            },
            {
                title: "绝句(迟日江山丽)",
                content: "迟日江山丽，春风花草香。\n泥融飞燕子，沙暖睡鸳鸯。"
            },
            {
                title: "江畔独步寻花(其六)",
                content: "黄四娘家花满蹊，千朵万朵压枝低。\n留连戏蝶时时舞，自在娇莺恰恰啼。"
            },
            {
                title: "枫桥夜泊",
                content: "月落乌啼霜满天，江枫渔火对愁眠。\n姑苏城外寒山寺，夜半钟声到客船。"
            },
            {
                title: "游子吟",
                content: "慈母手中线，游子身上衣。\n临行密密缝，意恐迟迟归。\n谁言寸草心，报得三春晖。"
            },
            {
                title: "江雪",
                content: "千山鸟飞绝，万径人踪灭。\n孤舟蓑笠翁，独钓寒江雪。"
            },
            {
                title: "渔歌子",
                content: "西塞山前白鹭飞，桃花流水鳜鱼肥。\n青箬笠，绿蓑衣，斜风细雨不须归。"
            },
            {
                title: "塞下曲(月黑雁飞高)",
                content: "月黑雁飞高，单于夜遁逃。\n欲将轻骑逐，大雪满弓刀。"
            },
            {
                title: "望洞庭",
                content: "湖光秋月两相和，潭面无风镜未磨。\n遥望洞庭山水翠，白银盘里一青螺。"
            },
            {
                title: "浪淘沙(九曲黄河万里沙)",
                content: "九曲黄河万里沙，浪淘风簸自天涯。\n如今直上银河去，同到牵牛织女家。"
            },
            {
                title: "赋得古原草送别",
                content: "离离原上草，一岁一枯荣。\n野火烧不尽，春风吹又生。\n远芳侵古道，晴翠接荒城。\n又送王孙去，萋萋满别情。"
            },
            {
                title: "池上",
                content: "小娃撑小艇，偷采白莲回。\n不解藏踪迹，浮萍一道开。"
            },
            {
                title: "忆江南",
                content: "江南好，风景旧曾谙。\n日出江花红胜火，春来江水绿如蓝。\n能不忆江南？"
            },
            {
                title: "小儿垂钓",
                content: "蓬头稚子学垂纶，侧坐莓苔草映身。\n路人借问遥招手，怕得鱼惊不应人。"
            },
            {
                title: "悯农(李绅)",
                content: "锄禾日当午，汗滴禾下土。\n谁知盘中餐，粒粒皆辛苦。"
            },
            {
                title: "寻隐者不遇",
                content: "松下问童子，言师采药去。\n只在此山中，云深不知处。"
            },
            {
                title: "山行",
                content: "远上寒山石径斜，白云生处有人家。\n停车坐爱枫林晚，霜叶红于二月花。"
            },
            {
                title: "清明",
                content: "清明时节雨纷纷，路上行人欲断魂。\n借问酒家何处有，牧童遥指杏花村。"
            },
            {
                title: "江南春",
                content: "千里莺啼绿映红，水村山郭酒旗风。\n南朝四百八十寺，多少楼台烟雨中。"
            },
            {
                title: "乐游原",
                content: "向晚意不适，驱车登古原。\n夕阳无限好，只是近黄昏。"
            },
            {
                title: "蜂",
                content: "不论平地与山尖，无限风光尽被占。\n采得百花成蜜后，为谁辛苦为谁甜？"
            },
            {
                title: "江上渔者",
                content: "江上往来人，但爱鲈鱼美。\n君看一叶舟，出没风波里。"
            },
            {
                title: "元日",
                content: "爆竹声中一岁除，春风送暖入屠苏。\n千门万户曈曈日，总把新桃换旧符。"
            },
            {
                title: "泊船瓜洲",
                content: "京口瓜洲一水间，钟山只隔数重山。\n春风又绿江南岸，明月何时照我还。"
            },
            {
                title: "书湖阴先生壁",
                content: "茅檐长扫净无苔，花木成畦手自栽。\n一水护田将绿绕，两山排闼送青来。"
            },
            {
                title: "六月二十七日望湖楼醉书",
                content: "黑云翻墨未遮山，白雨跳珠乱入船。\n卷地风来忽吹散，望湖楼下水如天。"
            },
            {
                title: "饮湖上初晴后雨",
                content: "水光潋滟晴方好，山色空蒙雨亦奇。\n欲把西湖比西子，淡妆浓抹总相宜。"
            },
            {
                title: "惠崇春江晚景",
                content: "竹外桃花三两枝，春江水暖鸭先知。\n蒌蒿满地芦芽短，正是河豚欲上时。"
            },
            {
                title: "题西林壁",
                content: "横看成岭侧成峰，远近高低各不同。\n不识庐山真面目，只缘身在此山中。"
            },
            {
                title: "夏日绝句",
                content: "生当作人杰，死亦为鬼雄。\n至今思项羽，不肯过江东。"
            },
            {
                title: "示儿",
                content: "死去元知万事空，但悲不见九州同。\n王师北定中原日，家祭无忘告乃翁。"
            },
            {
                title: "秋夜将晓出篱门迎凉有感",
                content: "三万里河东入海，五千仞岳上摩天。\n遗民泪尽胡尘里，南望王师又一年。"
            },
            {
                title: "四时田园杂兴(昼出耘田夜绩麻)",
                content: "昼出耘田夜绩麻，村庄儿女各当家。\n童孙未解供耕织，也傍桑阴学种瓜。"
            },
            {
                title: "四时田园杂兴(梅子金黄杏子肥)",
                content: "梅子金黄杏子肥，麦花雪白菜花稀。\n日长篱落无人过，惟有蜻蜓蛱蝶飞。"
            },
            {
                title: "小池",
                content: "泉眼无声惜细流，树阴照水爱晴柔。\n小荷才露尖尖角，早有蜻蜓立上头。"
            },
            {
                title: "晓出净慈寺送林子方",
                content: "毕竟西湖六月中，风光不与四时同。\n接天莲叶无穷碧，映日荷花别样红。"
            },
            {
                title: "春日",
                content: "胜日寻芳泗水滨，无边光景一时新。\n等闲识得东风面，万紫千红总是春。"
            },
            {
                title: "观书有感",
                content: "半亩方塘一鉴开，天光云影共徘徊。\n问渠那得清如许？为有源头活水来。"
            },
            {
                title: "题临安邸",
                content: "山外青山楼外楼，西湖歌舞几时休？\n暖风熏得游人醉，直把杭州作汴州。"
            },
            {
                title: "游园不值",
                content: "应怜屐齿印苍苔，小扣柴扉久不开。\n春色满园关不住，一枝红杏出墙来。"
            },
            {
                title: "乡村四月",
                content: "绿遍山原白满川，子规声里雨如烟。\n乡村四月闲人少，才了蚕桑又插田。"
            },
            {
                title: "墨梅",
                content: "我家洗砚池头树，朵朵花开淡墨痕。\n不要人夸好颜色，只留清气满乾坤。"
            },
            {
                title: "石灰吟",
                content: "千锤万凿出深山，烈火焚烧若等闲。\n粉骨碎身浑不怕，要留清白在人间。"
            },
            {
                title: "竹石",
                content: "咬定青山不放松，立根原在破岩中。\n千磨万击还坚劲，任尔东西南北风。"
            },
            {
                title: "所见",
                content: "牧童骑黄牛，歌声振林樾。\n意欲捕鸣蝉，忽然闭口立。"
            },
            {
                title: "村居",
                content: "草长莺飞二月天，拂堤杨柳醉春烟。\n儿童散学归来早，忙趁东风放纸鸢。"
            },
            {
                title: "己亥杂诗",
                content: "九州生气恃风雷，万马齐喑究可哀。\n我劝天公重抖擞，不拘一格降人才。"
            }
        ];

        // DOM元素
        const poemDisplay = document.getElementById('poemDisplay');
        const startBtn = document.getElementById('startBtn');
        const stopBtn = document.getElementById('stopBtn');
        const showAnswerBtn = document.getElementById('showAnswerBtn');
        const answerModal = document.getElementById('answerModal');
        const modalTitle = document.getElementById('modalTitle');
        const poemContent = document.getElementById('poemContent');
        const closeModal = document.getElementById('closeModal');

        // 变量
        let intervalId = null;
        let currentPoemIndex = -1;

        // 开始随机滚动
        startBtn.addEventListener('click', () => {
            startBtn.disabled = true;
            stopBtn.disabled = false;
            showAnswerBtn.disabled = true;
            
            intervalId = setInterval(() => {
                currentPoemIndex = Math.floor(Math.random() * poems.length);
                poemDisplay.textContent = poems[currentPoemIndex].title;
            }, 100);
        });

        // 暂停滚动
        stopBtn.addEventListener('click', () => {
            clearInterval(intervalId);
            startBtn.disabled = false;
            stopBtn.disabled = true;
            showAnswerBtn.disabled = false;
        });

        // 显示答案
        showAnswerBtn.addEventListener('click', () => {
            if (currentPoemIndex >= 0) {
                modalTitle.textContent = poems[currentPoemIndex].title;
                poemContent.textContent = poems[currentPoemIndex].content;
                answerModal.style.display = 'flex';
            }
        });

        // 关闭弹窗
        closeModal.addEventListener('click', () => {
            answerModal.style.display = 'none';
        });

        // 点击模态框外部关闭
        answerModal.addEventListener('click', (e) => {
            if (e.target === answerModal) {
                answerModal.style.display = 'none';
            }
        });
    </script>
</body>
</html>